<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



    <title>图片循环滚动</title>

    <style>

        #box div, box ul,box  li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}

        #box ol, box ul ,box li{list-style:none}

        #box img {border: 0; vertical-align:middle}

        #box .clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px}

        #box a{color:#000000;text-decoration:none}

        #box a:hover{color:#BA2636;text-decoration:underline}



        #box{width:925px; margin:20px auto; padding:2px;color:#000000;background:#FFF; text-align:center}

        #Marquee_x { overflow:hidden; width: 925px }

        #Marquee_x ul li ,#Marquee_x ul li div{ float:left;line-height:25px;overflow:hidden}

        #Marquee_x ul li div{ float:left;line-height:25px; width:142px; overflow:hidden}

        #Marquee_x ul li div img{ border:1px solid #DADADA; width:140px; height:130px; display:block}

        #Marquee_x ul li div span{ display:block;font-size: 12px;line-height:16px;}

    </style>



    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script>

        (function($){
            $.fn.jcMarquee = function(options) {
                var defaults = {
                    'marquee':'x',

                    'margin_bottom':'0',

                    'margin_right':'0',

                    'speed':'10'

                };

                var options = $.extend(defaults,options);

                return this.each(function() {
                    var $marquee = $(this),

                        $marquee_scroll = $marquee.children('ul');

                    $marquee_scroll.append("<li class='clone'>"+"</li>");

                    $marquee_scroll.find('li').eq(0).children().clone().appendTo('.clone');

                    var $marquee_left = $marquee_scroll.find('li');

                    if (options.marquee == 'x') {
                        var x = 0;

                        $marquee_scroll.css('width','1000%');

                        $marquee_left.find('div').css({'margin-right':options.margin_right});

                        $marquee_left.css({'margin-right':options.margin_right});

                        function Marquee_x(){
                            $marquee.scrollLeft(++x);

                            _margin = parseInt($marquee_left.find('div').css('margin-right'));

                            if(x==$marquee_left.width()+_margin) { x = 0 };

                        };

                        var MyMar=setInterval(Marquee_x,options.speed);

                        $marquee.hover(function(){
                            clearInterval(MyMar);

                        },function(){
                            MyMar=setInterval(Marquee_x,options.speed);

                        });

                    }

                    if (options.marquee == 'y') {
                        var y = 0;

                        $marquee_scroll.css('height','1000%');

                        $marquee_left.find('div').css('margin-bottom',options.margin_bottom);

                        $marquee_left.css('margin-bottom',options.margin_bottom);

                        function Marquee_y(){
                            $marquee.scrollTop(++y);

                            _margin = parseInt($marquee_left.find('div').css('margin-bottom'));

                            if(y==$marquee_left.height()+_margin) { y = 0 };

                        };

                        var MyMar=setInterval(Marquee_y,options.speed);

                        $marquee.hover(function(){
                            clearInterval(MyMar);

                        },function(){
                            MyMar=setInterval(Marquee_y,options.speed);

                        });

                    };

                });

            };

        })(jQuery)

        $(function(){
            $('#Marquee_x').jcMarquee({ 'marquee':'x','margin_right':'10px','speed':20 });

//10px代表间距,20代表滚动速度

        });

    </script>

</head>

<body>

<div id="box">

    <div id="Marquee_x">

        <ul style="width: 1000%;">

            <li style="margin-right: 10px;">

                <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.3.15ea397fwbW3VD&id=619159500532" target="_blank"><img src="https://gd1.alicdn.com/imgextra/i4/1035244808/O1CN01BlGPxi1lO6t5k0GRA_!!1035244808.jpg"><span>2020短袖t恤男士潮牌夏季潮流纯棉夏装T恤男装上衣</span></a></div>

                <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.5.15ea397fwbW3VD&id=619161180900" target="_blank"><img src="https://gd2.alicdn.com/imgextra/i1/1035244808/O1CN01Kp7KtR1lO6t67lvpt_!!1035244808.jpg"><span>男短袖T恤圆领爆款t恤2020夏季新款潮流半袖男装体恤衫</span></a></div>

                <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.7.15ea397fwbW3VD&id=619718242434" target="_blank"><img src="https://gd3.alicdn.com/imgextra/i3/1035244808/O1CN01fS7ugn1lO6t5j9pcI_!!1035244808.jpg"><span>短袖T恤男装2020夏季新款宇宙翅膀图案圆领潮牌衣服</span></a></div>

                <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.9.15ea397fwbW3VD&id=619726198924" target="_blank"><img src="https://gd3.alicdn.com/imgextra/i2/1035244808/O1CN01mvr2ws1lO6tA6fXXJ_!!1035244808.jpg"><span>2020年夏季纯棉短袖男士t恤男潮牌潮流韩版修身体桖</span></a></div>



            </li>

            <!--不加下面的标签就会卡顿 -->

            <li class="clone" style="margin-right: 10px;">

                <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.3.15ea397fwbW3VD&id=619159500532" target="_blank"><img src="https://gd1.alicdn.com/imgextra/i4/1035244808/O1CN01BlGPxi1lO6t5k0GRA_!!1035244808.jpg"><span>2020短袖t恤男士潮牌夏季潮流纯棉夏装T恤男装上衣</span></a></div>

                <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.5.15ea397fwbW3VD&id=619161180900" target="_blank"><img src="https://gd2.alicdn.com/imgextra/i1/1035244808/O1CN01Kp7KtR1lO6t67lvpt_!!1035244808.jpg"><span>男短袖T恤圆领爆款t恤2020夏季新款潮流半袖男装体恤衫</span></a></div>

                <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.7.15ea397fwbW3VD&id=619718242434" target="_blank"><img src="https://gd3.alicdn.com/imgextra/i3/1035244808/O1CN01fS7ugn1lO6t5j9pcI_!!1035244808.jpg"><span>短袖T恤男装2020夏季新款宇宙翅膀图案圆领潮牌衣服</span></a></div>

                <div style="margin-right: 10px;"><a href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.9.15ea397fwbW3VD&id=619726198924" target="_blank"><img src="https://gd3.alicdn.com/imgextra/i2/1035244808/O1CN01mvr2ws1lO6tA6fXXJ_!!1035244808.jpg"><span>2020年夏季纯棉短袖男士t恤男潮牌潮流韩版修身体桖</span></a></div>



            </li>

        </ul>

    </div>

</div>